<template>
	<view class="page">
		<headnav leftText="申请退款"></headnav>
		<scroll-view scroll-y="true"  class="scroll-v pageScroll">
		<view class="pageBox">
			<view class="block dls">
				<!-- <view class="dl">
					 <view class="dt">售后数量</view>
					 <view class="dd">
						 1
					 </view>
				 </view> -->
				 <view class="dl">
						 <view class="dt">申请类型</view>
						 <view class="dd">
							 <uni-data-select
								style="width: 100%;d"
								 v-model="form_data.type"
								 :localdata="rangeType"
								 :clear="false"
							   ></uni-data-select>
						 </view>
				 </view>
				 <view class="dl">
						 <view class="dt">申请原因</view>
						 <view class="dd">
							 <uni-data-select
								style="width: 100%;"
								 v-model="form_data.reason_id"
								 :localdata="rangeType2"
								 :clear="false"
							   ></uni-data-select>
						 </view>
				 </view>
				<!-- <view class="dl">
						 <view class="dt">联系电话</view>
						 <view class="dd">
							 <input type="text" class="input" placeholder="请输入" placeholder-class="inputPla"/>
						 </view>
				 </view> -->
			
			</view>
			<view class="textares">
				<view class="title">申请说明</view>
				<textarea placeholder="请填写详细说明" v-model="form_data.user_remark"  class="textarea" maxlength="50" placeholder-class="inputPla" />
			</view>
			<view class="bottoBt">
				<view class="bt bt-a" @tap='submit'>提交申请</view>
			</view>
		</view>
		
		
		</scroll-view>
	</view>
</template>

<script>
	//已购买 仅退款  已预订   其他都是 二选一
	import {  reason_list, reafter } from '@/api/goods.js'
	export default {
		data() { 
			return {
			  form_data: {
				  type:1,
				  reason_id:'',
				  user_remark:''
			  },
			  id:'',
			  user_remark:'',
			  rangeType:[],
			  rangeType2:[]
			}
		},
		onLoad() {
			this.id = this.$Route.query.id;
			this.select = this.$Route.query.select;
			console.log(this.id);
			if(this.select == 1) {
				this.rangeType = [
			  	  { value: 1, text: "仅退款" }
			  ]
			}
			if(this.select == 2) {
				this.rangeType = [
			  	  { value: 1, text: "仅退款" },
				  { value: 2, text: "退款退货" }
			  ]
			}
			console.log(this.select);
			this.getReason_list();
		},
		
		methods: {
			async getReason_list () {
				 let type;
				if(this.select == 1) { //已购买
					type = 1;
				} else {
					type = 3;
				}
				const { data } = await reason_list({type:type}) 
				
				this.rangeType2 = data.map ((item) => {
					return {
						value:item.k,
						text:item.v
					}
				});
			    this.form_data.reason_id = this.rangeType2[0].value;
			},
			scrolltolower() {
				
			},
			gochangeSchool() {
				uni.navigateTo({
					url:'/pages/changeSchool/changeSchool'
				})
			},
			change(e) {
				this.swiper.current = e.detail.current;
			},
			async submit() {
				 const obj = {
					 ...this.form_data,
					 order_id:this.id,
					 ship_amount:0
				 }
				 console.log(obj);
				 const res  =  await reafter(obj);
				 if (res) {
					 uni.showToast({
					 	title:'提交成功！'
					 })
					 setTimeout(() => {
						 uni.navigateBack();
					 },300)
				 }
				// console.log(this.form_data);
				// console.log(this.id);
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/dls.scss";
   .page {
   		background-color: #f5f8fa;
   		width: 100%;
   		height: 100%;
		overflow: hidden;
   	}

	.inputPla {
		 color:#d6d6d6;
	}
	.input {
		// background-color: #d6d6d6;
		width:200rpx;
		height: 80rpx;
		padding: 0 20rpx;
		// border-bottom: 1px solid #dcd7d7;
		text-align: right;
	}
    
	.uni-select__selector-item {
		padding: 0 6rpx;
	}


	.pageBox {
	
	}
	.textares {
		width: 700rpx;
		border-radius: 26rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 40rpx;
		box-sizing: border-box;
		.title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
		.textarea {
			
			width: 580rpx;
			height: 280rpx;
			background-color: #f7f7f7;
			border-radius: 22rpx;
			padding: 20rpx;
			font-size: 30rpx;
			display: block;
			margin: 0 auto;
		}
	}
	.bottoBt {
		padding: 105rpx  55rpx 155rpx;
		@include bt-s-1();
	}
</style>
